<template>
  <div class="intelligent_analysis">
    <el-row :gutter="24">
      <el-col :span="12">
        <el-card header="智能分析">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="90px"
            enctype="multipart/form-data"
          >
            <el-form-item label="分析目标: " prop="goal">
              <el-input type="textarea" v-model="form.goal"></el-input>
            </el-form-item>
            <el-form-item label="图表名称: " prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="图表类型: " prop="chartType">
              <el-select v-model="form.chartType" placeholder="请选择图表类型">
                <el-option label="折线图" value="折线图"></el-option>
                <el-option label="柱状图" value="柱状图"></el-option>
                <el-option label="堆叠图" value="堆叠图"></el-option>
                <el-option label="饼图" value="饼图"></el-option>
                <el-option label="雷达图" value="雷达图"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="原始数据: ">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-remove="handleRemove"
                :on-change="handleChange"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                name="file"
                :file-list="fileList"
                ref="upload"
                :auto-upload="false"
              >
                <el-button size="small" type="success" icon="el-icon-upload2"
                  >上传Excel文件</el-button
                >
                <div slot="tip" class="el-upload__tip">
                  只能上传xls/xlsx文件，且不超过1MB
                </div>
              </el-upload>
            </el-form-item>

            <el-form-item>
              <el-button
                  type="primary"
                  @click="onSubmit"
                  v-loading="submitting"
                  :disabled="submitting"
              >提交</el-button>
              <el-button @click="resetForm" :disabled="loading"
              >重置</el-button>
              <div style="text-align: right; margin-right: 20px">
                <el-button
                    type="success"
                    @click="getRecords"
                >查询记录</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card header="分析结论" v-loading="submitting">
          <div v-if="chart.genResult" style="white-space: pre-wrap">
            {{ chart.genResult }}
            <!-- 根据具体的需求来显示生成结果 -->
          </div>
          <div v-else>
            <div v-if="!submitting">请先在左侧进行提交</div>
          </div>
        </el-card>
        <el-divider></el-divider>
        <el-card header="可视化图表" v-loading="submitting">
          <div v-show="chart.genChart">
            <div
              ref="chartContainer"
              style="width: 100%; height: 50vh"
              class="chartContainer"
            ></div>
          </div>
          <div v-show="!chart.genChart">
            <div v-if="!submitting" @click="createChart()">
              请先在左侧进行提交
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 历史记录详情对话框 -->
    <el-dialog :visible.sync="dialogVisible" title="历史记录详情">
      <el-card header="历史记录" v-loading="loading">
        <div v-if="chartHistory.genResult">
          {{chartHistory.genResult}}
          <br><br>
          <div v-show="chartHistory.genChart" ref="chartContainer"
              style="width: 100%; height: 45vh"
              class="chartContainer"
          ></div>
        </div>
        <!--<div v-for="item in messages" :key="item.chartId">
          <div v-if="item.genResult">
            <p>{{ item.genResult }}</p>
          </div>
          <div v-if="item.genChart">
            <div
                :ref="'chartContainer_' + item.chartId"
                style="width: 100%; height: 50vh"
                class="chartContainer"
            ></div>
          </div>
        </div>-->
      </el-card>
      <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
       </span>
    </el-dialog>
  </div>
</template>
<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      messages: [],
      dialogVisible: false,
      /*message: {
        genChart: "",
        genResult: "",
        chartId: "",
      },*/
      form: {
        goal: "",
        name: "",
        chartType: "",
        adminId: undefined,
      },
      file: {},
      rules: {
        goal: [
          { required: true, message: "请输入分析目标", trigger: "blur" },
          {
            min: 5,
            max: 100,
            message: "长度在 5 到 100 个字符",
            trigger: "blur",
          },
        ],
      },
      chart: {
        genChart: "",
        genResult: "",
        chartId: "",
      },
      resultChart: {},
      chartHistory: {
        genChart: "",
        genResult: "",
        chartId: "",
      },
      resultChartHistory: {},
      fileList: [],
      submitting: false,
      loading: true,
    };
  },
  methods: {
    async getRecords(){
      // TODO: 获取历史记录-->列表展示
      this.dialogVisible = true;
      var adminId = window.sessionStorage.getItem("adminId");
      const {data: res} = await this.$http.get("admin/ai_analysis_information/" + adminId)
      if (res.status !== 200) {
        return this.$message.error(res.msg)
      }
      this.$message.success({
        message: res.msg,
        duration: 1500
      })
      // this.messages = res.data || []; // 保存历史记录数据
      /*res.data.forEach((item) => {
        this.messages.push(item);
        // this.chart = item.data;
      })*/
      // 确保正确推送历史记录
      // this.messages = res.data;
      // this.createCharts(); // 在数据加载后创建图表
      this.chartHistory = res.data;
      this.resultChartHistory = res.map.genChart;
      this.createChartHistory();
      this.$message.success({
        message: res.msg,
        duration: 1500,
      });
      this.loading = false;
    },
    // 文件数量超过限制
    handleExceed(files, fileList) {
      this.$message.info({
        message: "最多只能上传一个文件",
        duration: 1500,
      });
    },
    // 文件状态发生改变回调(添加文件、上传成功和上传失败时都会被调用)
    handleChange(file, fileList) {
      // 1. 检查文件类型 只能为xls或者xlsx\
      // 第一种是xls 第二种是xlsx
      const acceptTypeList = [
        "application/vnd.ms-excel",
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      ];
      // 表示用户上传的文件类型不在允许范围内
      if (acceptTypeList.indexOf(file.raw.type) === -1) {
        this.$message.info({
          message: "只允许xls或者xlsx格式的文件上传",
          duration: 1500,
        });
        this.handleRemove(file);
        return;
      }
      // 2.检查文件大小是否大于1MB
      const acceptSize = 1 * 1024 * 1024;
      if (file.raw.size > acceptSize) {
        this.$message.info({
          message: "只允许文件大小在1MB之内的Excel文件",
          duration: 1500,
        });
        this.handleRemove(file);
        return;
      }
      this.file = file.raw;
    },
    async onSubmit() {
      if (this.submitting) {
        return;
      }
      this.submitting = true;
      const formData = new FormData();

      if (this.file) {
        formData.append("file", this.file);
      }
      this.form.adminId = parseInt(window.sessionStorage.getItem("adminId"));
      for (const key in this.form) {
        formData.append(key, this.form[key]);
      }
      this.$message.info({
        message: "接口调用花费时间在两三分钟左右，请耐心等待，AI大模型暂时不太稳定",
        duration: 2500,
      });
      const { data: res } = await this.$http.post("/admin/gen", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      });
      if (res.status !== 200) {
        this.submitting = false;
        return this.$message.error({
          message: res.msg,
          duration: 1500,
        });
      }
      this.chart = res.data;
      this.resultChart = res.map.genChart;
      this.createChart();
      this.$message.success({
        message: res.msg,
        duration: 1500,
      });
      this.submitting = false;
    },
    createChart() {
      const chartOption = this.resultChart;
      if (!chartOption) {
        return this.$message.error({
          message: "图表代码解析错误",
          duration: 1500,
        });
      }
      this.$nextTick(() => {
        const chart = echarts.init(this.$refs.chartContainer);
        chart.setOption(chartOption);
      });
    },
    createChartHistory() {
      const chartOption = this.resultChartHistory;
      if (!chartOption) {
        return this.$message.error({
          message: "图表代码解析错误",
          duration: 1500,
        });
      }
      this.$nextTick(() => {
        const chart = echarts.init(this.$refs.chartContainer);
        chart.setOption(chartOption);
      });
    },
    createCharts() {
      // 遍历 messages 渲染每个图表
      this.messages.forEach((item) => {
        const chartOption = JSON.parse(item.genChart); // 直接从 item 获取 genChart 字符串
        // this.chart = item.data;
        // const chartOption = item.map.genChart;
        if (!chartOption) {
          return this.$message.error({
            message: "图表代码解析错误",
            duration: 1500,
          });
        }

        this.$nextTick(() => {
          // 获取对应的 chartContainer 的 ref，并初始化 ECharts 图表
          // 获取对应的 chartContainer 的 ref，并初始化 ECharts 图表
          const chartContainer = this.$refs['chartContainer_' + item.chartId]; // 根据 chartId 获取唯一的 ref
          if (chartContainer) {
            const chart = echarts.init(chartContainer);  // 初始化图表
            chart.setOption(chartOption);  // 设置图表配置
          }
          // const chart = echarts.init(this.$refs.chartContainer);
          // chart.setOption(chartOption);
        });
      });
      this.loading = false;
    },
    resetForm() {
      this.$refs.form.resetFields();
      this.handleRemove();
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
      this.fileList = [];
      this.file = {};
    },
  },
  mounted() {},
  /*created() {
    this.getRecords();
  }*/
};
</script>
<style scoped lang="less">
.intelligent_analysis {
  .el-card {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .result-card, .chart-card {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
  }

  .el-card__header {
    font-size: 16px;
    color: #333;
    background-color: #f4f7fc;
    border-bottom: 2px solid #ebeef5;
  }

  .chart-container {
    width: 100%;
    height: 50vh;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  .chart-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    color: #aaa;
    font-size: 16px;
  }

  .el-divider {
    margin: 20px 0;
  }

  /* 适配响应式布局 */
  @media screen and (max-width: 1200px) {
    .el-col {
      padding-left: 8px;
      padding-right: 8px;
    }
  }

  @media screen and (max-width: 768px) {
    .intelligent_analysis {
      .el-card {
        border-radius: 8px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
      }
    }
  }
}
.dialog-footer {
  display: flex;
  justify-content: right;
  margin-top: 20px;
}
</style>
